<template>
  <el-dialog
    class="warning-dialog"
    style="margin-top: 50vh"
    v-model="visible"
    v-bind="$attrs"
    :data="data"
    :close-on-click-modal="false"
    :show-close="false"
    width="400px"
    @open="handleOpen"
    @opened="handleOpened"
    @close="handleClose"
    @closed="handleClosed"
  >
    <!-- 默认插槽 -->
    <slot>
      <div v-if="data && data.message">{{ data.message }}</div>
    </slot>

    <!-- 头部插槽（替换 title） -->
    <template #header>
      <slot name="header">
        {{ $attrs.title || "提示" }}
      </slot>
    </template>

    <!-- 底部插槽 -->
    <template #footer>
      <slot name="footer">
        <span class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">我知道了</el-button>
        </span>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";

// 定义 props，只保留必要的
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

// 定义 emits
const emit = defineEmits([
  "update:modelValue",
  "open",
  "opened",
  "close",
  "closed",
  "confirm",
  "cancel",
]);

// 计算属性：双向绑定 visible
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

// 事件处理方法
const handleOpen = () => {
  emit("open");
};

const handleOpened = () => {
  emit("opened");
};

const handleClose = () => {
  emit("close");
};

const handleClosed = () => {
  emit("closed");
};

const handleConfirm = () => {
  emit("confirm");
  visible.value = false;
};

const handleCancel = () => {
  emit("cancel");
  visible.value = false;
};
</script>

<style scoped>
.warning-dialog :deep(.el-dialog) {
  width: 400px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.warning-dialog :deep(.el-dialog__header) {
  text-align: center !important;
  padding: 24px 24px 0 24px !important;
}

.warning-dialog :deep(.el-dialog__title) {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222 !important;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.warning-dialog :deep(.el-dialog__body) {
  text-align: left !important;
  padding: 24px !important;
  min-height: 120px;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  word-break: break-word;
}

.warning-dialog :deep(.el-dialog__footer) {
  text-align: center !important;
  padding: 0 24px 24px 24px !important;
}
</style>
